<template>
    <div>
        <el-container class="ov-hidden full-height">
            <PanelHeader
                    ref="panelHeader"
                    :data="params"
                    :online="isOnline"
                    :keyboard="inputEvent"
                    @event="handleHeaderEvent"
            />

            <!-- 主体信息 -->
            <el-main class="main-box no-padding">
                <div
                        id="lumenChatPanel"
                        class="talks-container lum-scrollbar"
                        @scroll="talkPanelScroll($event)"
                >
                    <!-- 数据加载状态栏 -->
                    <div class="loading-toolbar">
            <span v-if="loadRecord.status == 0" class="color-blue">
              <i class="el-icon-loading"/> 正在加载数据中...
            </span>
                        <span
                                v-else-if="loadRecord.status == 1"
                                class="pointer color-blue"
                                @click="loadChatRecords"
                        >
              <i class="el-icon-bottom"/> 查看更多消息...
            </span>
                        <span v-else> 没有更多消息了... </span>
                    </div>

                    <!-- 消息主体 -->
                    <div v-for="(item, idx) in records" :key="item.id">
                        <div v-if="item.content === 'null'"></div>
                        <div v-else>
                            <!-- 群消息 -->
                            <div v-if="item.groupFlag === true" class="message-box">
                                <invite-message @cat="catFriendDetail" :invite="item.invite"/>
                            </div>

                            <!-- 撤回消息 -->
                            <div v-else-if="item.is_revoke == 1" class="message-box">
                                <revoke-message :item="item"/>
                            </div>

                            <!-- 其它对话消息 -->
                            <div
                                    v-else
                                    class="message-box record-box"
                                    :class="{
                'direction-rt': item.fromId == user_id ,
                'checkbox-border': multiSelect.isOpen === true,
              }"
                            >
                                <aside v-show="multiSelect.isOpen" class="checkbox-column">
                                    <i
                                            class="el-icon-success"
                                            :class="{ selected: verifyMultiSelect(item.id) }"
                                            @click="triggerMultiSelect(item.id)"
                                    />
                                </aside>
                                <aside class="avatar-column">
                                    <el-avatar
                                            class="pointer"
                                            :size="30"
                                            :src="item.fromProfile"
                                            :onerror="$store.state.detaultAvatar"
                                            @click.native="catFriendDetail(item.fromId)"
                                    />
                                </aside>
                                <main class="main-column">
                                    <div class="talk-content">
                  <span
                          v-show="item.messageTypeId == 2"
                          class="nickname"
                  >
                    {{ item.fromName }} |
                    {{ item.createTime | moment }}
                  </span>

                                        <!-- 文本消息 -->
                                        <text-message
                                                v-if="item.messageTypeId === 2"
                                                :content="item.content | contentFil"
                                                :float="item.float"
                                                :full-width="false"
                                                :arrow="true"
                                                @contextmenu.native="onCopy(idx, item, $event)"
                                        />


                                        <!-- 图片消息 -->
                                        <!--                  <image-message-->
                                        <!--                    v-else-if="item.msg_type == 2 && item.file.file_type == 1"-->
                                        <!--                    :src="item.file.file_url"-->
                                        <!--                    @contextmenu.native="onCopy(idx, item, $event)"-->
                                        <!--                  />-->

                                        <!-- 音频文件预留 -->
                                        <!--                  <audio-message-->
                                        <!--                    v-else-if="item.msg_type == 2 && item.file.file_type == 2"-->
                                        <!--                    :src="item.file.file_url"-->
                                        <!--                    @contextmenu.native="onCopy(idx, item, $event)"-->
                                        <!--                  />-->

                                        <!-- 视频文件预留 -->
                                        <!--                  <video-message-->
                                        <!--                    v-else-if="item.msg_type == 2 && item.file.file_type == 3"-->
                                        <!--                    :src="item.file.file_url"-->
                                        <!--                    @contextmenu.native="onCopy(idx, item, $event)"-->
                                        <!--                  />-->

                                        <!-- 文件消息 -->
                                        <!--                  <file-message-->
                                        <!--                    v-else-if="item.msg_type == 2 && item.file.file_type == 4"-->
                                        <!--                    :file="item.file"-->
                                        <!--                    :record_id="item.id"-->
                                        <!--                    @contextmenu.native="onCopy(idx, item, $event)"-->
                                        <!--                  />-->

                                        <!-- 会话记录消息 -->
                                        <!--                  <forward-message-->
                                        <!--                    v-else-if="item.msg_type == 4"-->
                                        <!--                    :forward="item.forward"-->
                                        <!--                    :record_id="item.id"-->
                                        <!--                    @contextmenu.native="onCopy(idx, item, $event)"-->
                                        <!--                  />-->

                                        <!-- 代码块消息 -->
                                        <!--                  <code-message-->
                                        <!--                    v-else-if="item.msg_type == 5"-->
                                        <!--                    :code="item.code_block.code"-->
                                        <!--                    :lang="item.code_block.code_lang"-->
                                        <!--                    :maxwidth="true"-->
                                        <!--                    @contextmenu.native="onCopy(idx, item, $event)"-->
                                        <!--                  />-->


                                        <!-- 未知消息 -->
                                        <div class="unknown-msg" v-else>
                                            未知消息类型[{{ item.messageTypeId }}]
                                        </div>

                                        <!-- 消息引用(预留) -->
                                        <!-- <reply-message /> -->
                                    </div>
                                </main>
                            </div>

                            <!-- 消息时间 -->
                            <div
                                    v-show="compareTime(idx, item.createTime)"
                                    class="datetime no-select"
                                    v-text="sendTime(item.createTime)"
                            />
                        </div>
                    </div>
                </div>

                <!-- 置底按钮 -->
                <transition name="el-fade-in-linear">
                    <div
                            v-show="tipsBoard"
                            class="tips-board pointer"
                            @click="talkPanelScrollBottom"
                    >
                        <SvgMentionDown class="svg"/>
                        <span>回到底部</span>
                    </div>
                </transition>

                <!-- 新消息气泡 -->
                <div
                        v-show="tipsBoard && unreadMessage.num"
                        class="talk-bubble pointer no-select"
                        @click="talkPanelScrollBottom"
                >
                    <i class="el-icon-chat-dot-round"/>
                    <span>新消息({{ unreadMessage.num }}条)</span>
                    <span>
            &nbsp;#{{ unreadMessage.nickname }}#
            {{ unreadMessage.content }}
          </span>
                </div>
            </el-main>

            <!-- 页脚信息 -->
            <el-footer class="footer-box" height="160">
                <template v-if="multiSelect.isOpen === false">
                    <MeEditor
                            @send="submitSendMesage"
                            @keyboard-event="onKeyboardEvent"
                    />
                </template>
                <template v-else>
                    <PanelToolbar
                            v-model="multiSelect.items.length"
                            @event="handleMultiMode"
                    />
                </template>
            </el-footer>

            <!-- 群设置侧边栏 -->
            <div
                    class="sidebar-box"
                    :class="{ show: group.panel }"
                    v-outside="hideChatGroup"
            >
                <GroupPanel
                        v-if="params.source == 2"
                        :group-id="params.receive_id"
                        @close="hideChatGroup"
                        @send-group="hideChatGroup"
                        @quit-group="quitGroupSuccess"
                        @disturb-change="disturbChange"
                        @group-info="syncGroupInfo"
                />
            </div>
        </el-container>

        <!-- 消息管理器 -->
        <transition name="el-fade-in-linear">
            <TalkSearchRecord
                    v-if="findChatRecord"
                    :source="params.groupFlag == false ? 1 : 2"
                    :receive-id="params.friend_id"
                    :titleName="params.friendName"
                    :params="params"
                    @close="findChatRecord = false"
            />
        </transition>

        <!-- 选择联系人 -->
        <transition name="el-fade-in-linear">
            <UserContacts
                    v-if="selectContacts.isShow"
                    @close="selectContacts.isShow = false"
                    @confirm="confirmSelectContacts"
            />
        </transition>

        <!-- 好友用户信息 -->
        <UserBusinessCard ref="userBusinessCard"/>

        <!-- 群公告组件 -->
        <transition name="el-fade-in-linear">
            <GroupNotice
                    v-if="group.notice"
                    :group-id="params.friend_id"
                    @close="group.notice = false"
            />
        </transition>
    </div>
</template>
<script>
    import {mapState} from 'vuex'
    import UserBusinessCard from '@/components/user/UserBusinessCard'
    import TalkSearchRecord from '@/components/chat/TalkSearchRecord'
    import UserContacts from '@/components/chat/UserContacts'
    import GroupPanel from '@/components/group/GroupPanel'
    import GroupNotice from '@/components/group/GroupNotice'
    import MeEditor from '@/components/editor/MeEditor'
    import PanelHeader from './PanelHeader'
    import PanelToolbar from './PanelToolbar'
    import SocketInstance from '@/socket-instance'
    import {SvgMentionDown} from '@/core/icons'
    import {formateTime, parseTime, copyTextToClipboard} from '@/utils/functions'
    import {findTalkIndex} from '@/utils/talk'
    import {
        sendToOne,
        getMsgList,
        ServeForwardRecords,
        delMsgById,
        ServeRevokeRecords,
    } from '@/api/chat'
    import {getUser} from "@/utils/auth";
    import {sendGroupMsg, sendMessage} from '../../../socket'
    import store from "@/store";
    import {formattingTime} from "../../../utils/formattingTime";
    import {Notification} from "element-ui";
    import {msgList, frontChatMsg} from "../../../api/group";

    export default {
        inject: ['reload'],
        name: 'TalkEditorPanel',
        components: {
            MeEditor,
            UserContacts,
            GroupPanel,
            TalkSearchRecord,
            UserBusinessCard,
            GroupNotice,
            SvgMentionDown,
            PanelToolbar,
            PanelHeader,
        },
        props: {
            // 对话相关参数
            params: {
                type: Object,
                default: function () {
                    return {
                        friend_id: '',
                        friendState: '',
                        friendName: '',
                        groupFlag: '',
                    }
                },
            },

            // 用户是否在线
            isOnline: {
                type: Boolean,
                default: false,
            },
        },
        filters: {
            contentFil(content) {
                if (content === 'null') {
                    return " "
                } else {
                    return content
                }
            }
        },
        data() {
            return {
                user_id: JSON.parse(getUser()).userId,
                username: JSON.parse(getUser()).username,
                avatar: JSON.parse(getUser()).userProfile,
                // 记录加载相关参数
                loadRecord: {
                    status: 0,
                    minRecord: 0,
                },

                // 多选相关操作
                multiSelect: {
                    isOpen: false,
                    items: [],
                    mode: 0,
                },

                // 选择联系人窗口
                selectContacts: {
                    isShow: false,
                },

                // 群组Box
                group: {
                    panel: false,
                    notice: false,
                },

                // 键盘输入事件
                keyboardEvent: {
                    isShow: false,
                    time: 0,
                },

                // 聊天记录管理器数据
                findChatRecord: false,

                // 置底按钮是否显示
                tipsBoard: false,

                //聊天记录
                records: [],

                //定时器
                timer: '',
            }
        },
        computed: {
            ...mapState({
                unreadMessage: state => state.talks.unreadMessage,
                inputEvent: state => state.notify.inputEvent,
                uid: state => state.user.name,
                // records: state => state.dialogue.records,
                index_name: state => state.dialogue.index_name,
            }),
        },
        watch: {
            // 监听面板传递参数
            params() {
                this.loadRecord.minRecord = 0
                this.tipsBoard = false
                this.multiSelect = {
                    isOpen: false,
                    items: [],
                    mode: 0,
                }
                this.loadChatRecords()
            }
        },
        mounted() {
            this.loadChatRecords()
            this.talkPanelScrollBottom()
            this.timer = setInterval(() => {
                this.loadChatRecords()
            }, 100)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },

        methods: {
            sendTime: formateTime,

            // 处理 Header 组件事件
            handleHeaderEvent(event_name) {
                switch (event_name) {
                    case 'history':
                        this.findChatRecord = true
                        break
                    case 'notice':
                        this.group.notice = true
                        break
                    case 'setting':
                        this.group.panel = true
                        break
                }
            },

            // 回车键发送消息回调事件
            submitSendMesage(content) {
                if (this.params.groupFlag){
                    var params = {
                        groupId: this.params.friend_id,
                        userId: this.user_id,
                        username: this.username,
                        userProfile: this.avatar,
                        content: content,
                        messageTypeId: 2,
                    }
                    sendGroupMsg(params)
                    this.loadChatRecords();
                    this.talkPanelScrollBottom()
                }else {
                    sendMessage(content, this.params)
                    this.loadChatRecords();
                    this.talkPanelScrollBottom()
                }
            },

            // 推送编辑事件消息
            onKeyboardEvent(text) {
                // 判断是否推送键盘输入事件消息
                if (!this.$store.state.settings.keyboardEventNotify) {
                    return false
                }

                let time = new Date().getTime()

                // 判断当前对话是否属于私聊信息
                if (this.params.source == 2 || !this.isOnline) return

                // 判断在两秒内是否已推送事件
                if (this.keyboardEvent.time != 0 && time - this.keyboardEvent.time < 2000)
                    return

                this.keyboardEvent.time = time


                // 调用父类Websocket组件发送消息
                // SocketInstance.emit('event_keyboard', {
                //   send_user: this.uid,
                //   receive_user: this.params.receive_id,
                // })

            },

            // 加载用户聊天详情信息
            loadChatRecords() {
                this.loadRecord.status = -1
                if (this.params.groupFlag) {
                    frontChatMsg(this.params.friend_id)
                        .then(res => {
                            if (res.code !== 200) {clearInterval(this.timer);}
                            this.records = res.data.map(item => {
                                item.float = 'center'
                                if (item.id > 0) {
                                    item.float = item.fromId == this.user_id ? 'right' : 'left'
                                }
                                return item
                            })
                        })
                } else {
                    getMsgList(this.user_id, this.params.friend_id)
                        .then(res => {
                            if (res.code !== 200) {clearInterval(this.timer);}
                            this.$store.dispatch('SaveMsg', res.data)
                            this.records = res.data.map(item => {
                                item.float = 'center'
                                if (item.id > 0) {
                                    item.float = item.fromId == this.user_id ? 'right' : 'left'
                                }
                                return item
                            })

                        })
                        .catch(() => {
                            this.loadRecord.status = 1
                        })
                }
            },

            // 多选处理方式
            handleMultiMode(value) {
                if (value == 'close') {
                    this.closeMultiSelect()
                    return false
                }

                if (this.multiSelect.items.length <= 1) {
                    return false
                }

                if (value == 'forward') {
                    this.multiSelect.mode = 1
                    this.selectContacts.isShow = true
                    // 逐条转发
                    if (this.verifyMultiSelectType(4)) {
                        this.$notify({
                            title: '消息转发',
                            message: '会话记录不支持合并转发',
                        })
                        return false
                    }
                } else if (value == 'merge_forward') {
                    this.multiSelect.mode = 2
                    this.selectContacts.isShow = true
                    // 合并转发
                    if (this.verifyMultiSelectType(4)) {
                        this.$notify({
                            title: '消息转发',
                            message: '会话记录不支持合并转发',
                        })
                        return false
                    }
                } else if (value == 'delete') {
                    this.multiSelect.mode = 3

                    // 批量删除
                    let ids = this.multiSelect.items
                    delMsgById(ids).then(res => {
                        if (res.code === 200) {
                            this.delRecords(ids).closeMultiSelect()
                        }
                    })
                }
            },

            // 确认消息转发联系人事件
            confirmSelectContacts(arr) {
                let user_ids = []
                let group_ids = []
                arr.forEach(item => {
                    if (item.type == 1) {
                        user_ids.push(item.id)
                    } else {
                        group_ids.push(item.id)
                    }
                })
                console.log(user_ids)
                console.log(group_ids)

                this.$notify({
                    title: '提示',
                    message: '消息转发功能开发中',
                    type: 'success',
                })
                this.selectContacts.isShow = false

                // for (let i = 0; i < user_ids.length; i++) {
                //   sendMessage()
                // }

                // ServeForwardRecords({
                //   forward_mode: this.multiSelect.mode,
                //   source: this.params.source,
                //   receive_id: this.params.receive_id,
                //   records_ids: this.multiSelect.items,
                //   receive_user_ids: user_ids,
                //   receive_group_ids: group_ids,
                // }).then(res => {
                //   if (res.code == 200) {
                //     this.closeMultiSelect()
                //     this.$notify({
                //       title: '消息转发',
                //       message: '消息转发成功...',
                //       type: 'success',
                //     })
                //   }
                // })
            },

            // 处理消息时间是否显示
            compareTime(index, datetime) {
                // if (datetime == undefined) {
                //   return false
                // }
                //
                // if (this.records[index].is_revoke == 1) {
                //   return false
                // }
                //
                // // datetime = datetime.replace(/-/g, '/')
                // // let time = Math.floor(Date.parse(datetime) / 1000)
                // let currTime = Math.floor(new Date().getTime() / 1000)
                //
                // // 当前时间5分钟内时间不显示
                // if (currTime - time < 300) return false
                //
                // // 判断是否是最后一条消息,最后一条消息默认显示时间
                // if (index == this.records.length - 1) {
                //   return true
                // }

                // let nextDate = this.records[index + 1].created_at.replace(/-/g, '/')
                //
                // return !(
                //   parseTime(new Date(datetime), '{y}-{m}-{d} {h}:{i}') ==
                //   parseTime(new Date(nextDate), '{y}-{m}-{d} {h}:{i}')
                // )
            },

            // 查看好友用户信息
            catFriendDetail(value) {
                this.$refs.userBusinessCard.open(value)
            },

            // 撤回消息
            revokeRecords(index, item) {
                let delId = item.id
                var ids = new Array()
                ids[0] = delId
                delMsgById(ids).then(res => {
                    if (res.code === 200) {
                        this.$store.commit('DELETE_DIALOGUE', index)
                        Notification({
                            message: '消息已撤回',
                            position: 'top-right',
                            duration: 3 * 1000
                        })
                    }
                })
            },

            // 删除单条消息记录
            removeRecords(index, item) {
                let delId = item.id
                var ids = new Array()
                ids[0] = delId
                delMsgById(ids).then(res => {
                    if (res.code === 200) {
                        this.$store.commit('DELETE_DIALOGUE', index)
                    }
                })
            },

            // 转发消息
            forwardRecords(idx, item) {
                this.$notify({
                    title: '温馨提示',
                    message: '单条记录转发开发中...',
                })
            },

            // 从列表中删除记录
            delRecords(arr) {
                this.$store.commit('BATCH_DELETE_DIALOGUE', arr)
                return this
            },

            // 开启多选模式
            openMultiSelect() {
                this.multiSelect.isOpen = true
            },

            // 关闭多选模式
            closeMultiSelect() {
                this.multiSelect.isOpen = false
                this.multiSelect.items = []
            },

            // 判断记录是否选中
            verifyMultiSelect(records_id) {
                return this.multiSelect.items.indexOf(records_id) >= 0
            },

            // 触发多选事件
            triggerMultiSelect(records_id) {
                let i = this.multiSelect.items.indexOf(records_id)
                if (i >= 0) {
                    this.multiSelect.items.splice(i, 1)
                } else {
                    if (this.multiSelect.items.length >= 30) {
                        this.$notify({
                            title: '温馨提示',
                            message: '批量操作最大支持30条数据...',
                        })
                        return false
                    }
                    this.multiSelect.items.push(records_id)
                }
            },

            // 验证是否存在选择的指定类型的消息
            verifyMultiSelectType(type) {
                return this.records.some(item => {
                    return this.verifyMultiSelect(item.id) && item.msg_type == type
                })
            },

            // 消息点击右键触发自定义菜单
            onCopy(idx, item, event) {
                let menus = []
                let content = ''
                if (document.getElementById('copy_class_' + item.id)) {
                    content = document.getElementById('copy_class_' + item.id).innerText
                }

                if (content) {
                    menus.push({
                        label: '复制',
                        icon: 'el-icon-document-copy',
                        customClass: 'cus-contextmenu-item',
                        onClick: () => {
                            copyTextToClipboard(content)
                        },
                    })
                }

                var dateBegin = new Date(formattingTime(item.createTime).replace(/-/g, "/"));
                var dateEnd = new Date();//获取当前时间
                var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
                var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
                var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
                if (item.fromId === this.user_id && hours === 0 && minutes < 5) {
                    menus.push({
                        label: '撤回',
                        icon: 'el-icon-s-flag',
                        customClass: 'cus-contextmenu-item',
                        onClick: () => {
                            this.revokeRecords(idx, item)
                        },
                    })
                }

                menus.push({
                    label: '删除',
                    icon: 'el-icon-delete',
                    customClass: 'cus-contextmenu-item',
                    onClick: () => {
                        this.removeRecords(idx, item)
                    },
                })

                menus.push({
                    label: '转发',
                    icon: 'el-icon-s-promotion',
                    customClass: 'cus-contextmenu-item',
                    onClick: () => {
                        this.forwardRecords(idx, item)
                    },
                })

                menus.push({
                    label: '引用',
                    icon: 'el-icon-connection',
                    customClass: 'cus-contextmenu-item',
                    onClick: () => {
                    },
                })

                menus.push({
                    label: '多选',
                    icon: 'el-icon-finished',
                    customClass: 'cus-contextmenu-item',
                    onClick: () => {
                        this.openMultiSelect()
                    },
                })

                // 判断是否是图片消息
                if (item.msg_type == 2 && item.file.file_type == 1) {
                    menus.push({
                        label: '收藏',
                        icon: 'el-icon-picture',
                        customClass: 'cus-contextmenu-item',
                        onClick: () => {
                            this.$store.commit('SAVE_USER_EMOTICON', {
                                record_id: item.id,
                            })
                        },
                    })
                }

                this.$contextmenu({
                    items: menus,
                    event,
                    customClass: 'cus-contextmenu',
                    zIndex: 3,
                    minWidth: 120,
                })

                this.closeMultiSelect()
                event.preventDefault()
            },

            hideChatGroup() {
                this.group.panel = false
            },

            // 修改群聊免打扰状态
            disturbChange(detail) {
                this.$store.commit('UPDATE_TALK_ITEM', {
                    index: findTalkIndex(`2_${this.params.receive_id}`),
                    item: {
                        not_disturb: parseInt(detail.status),
                    },
                })
            },

            // 退出群聊回调事件
            quitGroupSuccess() {
                this.$emit('close-talk')
            },

            // 同步群信息
            syncGroupInfo(groupInfo) {
                this.$refs.panelHeader.setGroupNum(groupInfo.members_num)
            },

            // 对话面板滚动事件
            talkPanelScroll(e) {
                if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
                    this.loadChatRecords()
                    return
                }

                const height = e.target.scrollTop + e.target.clientHeight + 5
                this.tipsBoard = height < e.target.scrollHeight
                if (this.tipsBoard == false && this.unreadMessage.num > 0) {
                    this.$store.commit('CLEAR_TLAK_UNREAD_MESSAGE')
                }
            },

            // 聊天版本滚动到底部
            talkPanelScrollBottom() {
                let el = document.getElementById('lumenChatPanel')
                el.scrollTop = el.scrollHeight
            },
        },
    }
</script>
<style lang="less" scoped>
    .main-box {
        position: relative;
    }

    /* 面板页脚 */
    .footer-box {
        height: 160px !important;
        padding: 0;
        border-top: 1px solid #f5f5f5;
    }

    /* 侧边栏css */
    .sidebar-box {
        position: absolute;
        width: 350px;
        height: 100%;
        top: 0px;
        right: -350px;
        background: white;
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;

        &.show {
            right: 0;
            box-shadow: 0 0 14px #e2e1e1;
        }
    }

    .tips-board {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 20px;
        height: 30px;
        width: 100px;
        border-radius: 20px;
        font-size: 12px;
        background-color: #fff;
        box-shadow: 0 2.5px 10px 0 rgba(31, 35, 41, 0.1);
        color: #1f2329;

        span {
            margin-left: 5px;
            margin-top: -2px;
        }

        .svg {
            width: 10px;
            height: 10px;
            color: black;
        }
    }

    .talk-bubble {
        position: absolute;
        left: 0px;
        bottom: 20px;
        max-width: 300px;
        height: 40px;
        line-height: 40px;
        border-radius: 0 20px 20px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: white;
        padding: 0 15px 0 30px;
        font-size: 13px;
        background: #409eff;

        i {
            font-size: 22px;
            position: absolute;
            left: 5px;
            top: 9px;
        }
    }

    .talks-container {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 15px 30px;
        overflow-y: auto;

        .message-box {
            width: 100%;
            min-height: 30px;
            margin-bottom: 5px;
        }

        .loading-toolbar {
            height: 30px;
            line-height: 30px;
            margin: 5px 0;
            text-align: center;
            user-select: none;
            font-size: 13px;
            color: #cec4c4;

            .color-blue {
                color: #409eff;
            }
        }

        .datetime {
            height: 30px;
            line-height: 30px;
            color: #ccc9c9;
            font-size: 12px;
            text-align: center;
            margin: 5px 0;
        }

        .record-box {
            display: flex;
            flex-direction: row;
            transition: 0.5s ease;

            .checkbox-column {
                display: flex;
                justify-content: center;
                flex-basis: 40px;
                flex-shrink: 0;
                order: 1;
                user-select: none;
                padding-top: 25px;

                i {
                    color: #ccc;
                    cursor: pointer;
                    font-size: 22px;

                    &.selected {
                        color: #409eff !important;
                    }
                }
            }

            .avatar-column {
                width: 40px;
                flex-basis: 40px;
                flex-shrink: 0;
                display: flex;
                justify-content: center;
                order: 2;
                user-select: none;
                padding-top: 22px;
            }

            .main-column {
                flex: 1 auto;
                order: 3;
                position: relative;
                box-sizing: border-box;
                padding: 5px;
                overflow: hidden;

                .talk-title {
                    display: flex;
                    align-items: center;
                    height: 15px;
                    margin-bottom: 2px;
                    font-size: 10px;
                    user-select: none;
                    color: #a7a0a0;
                    opacity: 0;
                    transition: 0.5s ease;

                    &.show {
                        opacity: 1 !important;
                    }

                    span {
                        transform: scale(0.9);
                    }
                }

                .talk-content {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    box-sizing: border-box;
                    width: 100%;

                    .nickname {
                        font-size: 12px;
                        color: #a7a0a0;
                        margin: -4px 0 4px -8px;
                        transform: scale(0.9);
                    }
                }

                &:hover {
                    .talk-title {
                        opacity: 1;
                    }
                }
            }

            &.direction-rt {
                .avatar-column {
                    order: 3;
                }

                .main-column {
                    order: 2;

                    .talk-title {
                        justify-content: flex-end;
                    }

                    .talk-content {
                        align-items: flex-end;
                    }
                }
            }

            &.checkbox-border {
                border: 1px dashed #c4c4ec;

                &:hover {
                    border-color: #409eff;
                }
            }
        }
    }
</style>
